<template>
  <div id="indexlayout-left" :class="{ 'narrow': menuCollapsed, 'sidebar-separate': layoutSubName==='sidebar-separate'? true: false }">
    <div class="indexlayout-left-logo">
      <router-link to="/" class="logo-url">
        <img alt="y9-logo" src="@/assets/images/yunLogo.png">
        <span class="logo-title" v-if="!menuCollapsed">{{ $t("数据流引擎") }}</span>
      </router-link>
    </div>
    <div class="indexlayout-left-menu">
      <sider-menu
        :menuCollapsed="menuCollapsed"
        :belongTopMenu="belongTopMenu"
        :defaultActive="defaultActive"
        :menuData="menuData"
      ></sider-menu>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { watch, inject, ref} from 'vue'
import SiderMenu from '@/layouts/components/SiderMenu.vue';
// 注入 字体变量
const fontSizeObj: any = inject('sizeObjInfo');
const props = defineProps({
  menuCollapsed: {
    type: Boolean as computed<Boolean>,
    required: true
  },
  belongTopMenu: {
    type: String,
    default: ''
  },
  defaultActive: {
    type: String,
    default: ''
  },
  menuData: {
    type: Array,
    default: () => {
      return [];
    }
  },
  layoutSubName: {
    type: String as Ref<string>,
    required: true
  }
})
</script>

<style lang="scss" scoped>
@import "@/theme/global-vars.scss";


$sidebar-separate-margin-top: calc(
  #{$sidebar-separate-margin-left} + #{$headerHeight}
);
$sidebar-separate-menu-height: calc(100vh - #{$sidebar-separate-margin-top});

#indexlayout-left {
  display: flex;
  height: 100vh;
  flex-direction: column;
  width: $leftSideBarWidth;
  // background-color: #f40;
  background-color: var(--el-bg-color);
  // border-right: var(--el-border-base);
  transition-duration: 0.1s;

  &.sidebar-separate {
    position: absolute;
    z-index: 1;
    left: $sidebar-separate-margin-left;
    top: $sidebar-separate-margin-top;
    height: $sidebar-separate-menu-height;
  }
  .indexlayout-left-logo {
    width: 100%;
    height: $headerHeight;
    line-height: $headerHeight;
    text-align: left;
    vertical-align: middle;
    .logo-url {
      display: inline-flex;
      align-items: center;
      width: 100%;
      height: 100%;
      overflow: hidden;
      .logo-title {
        display: inline-block;
        margin-left: 15px;
        font-size: v-bind('fontSizeObj.largeFontSize');
        font-family: Roboto, sans-serif;
        color: var(--el-text-color-primary);
      }
    }
    img {
      width: $logoWidth;
      vertical-align: middle;
    }
  }

  .indexlayout-left-menu {
    flex: 1;
    overflow: hidden auto;
    & > ul {
      border-right: none;
      background-color: var(--el-bg-color);
      :deep(a) {
        text-decoration: none;
		.is-active{
			color: var(--el-color-primary);
		}
        & > li {
          color: var(--el-text-color-primary);

          i {
            margin-right: 10px;
            font-size: v-bind('fontSizeObj.largeFontSize');
          }
        }
        & > li:hover {
          background-color: var(--el-bg-color);
        }
      }
    }
    .left-scrollbar {
      width: 100%;
      height: 100%;
    }
  }

  &.narrow {
    width: $menu-collapsed-width;
  }

  @include scrollbar;
}
</style>
